/**
 * 关键词云图组件
 * 
 * 作用：展示舆情数据中的热门关键词
 * 使用：在首页分析区域展示热门关键词
 * 数据：接收包含word(词语)和weight(权重)属性的数组
 * 特点：使用词云图展示关键词，权重越高的词语显示越大
 */

<script setup lang="ts">
import { ref, onMounted, watch, onBeforeUnmount } from 'vue'
import * as echarts from 'echarts'
import 'echarts-wordcloud'

// 定义属性
const props = defineProps<{
  data: Array<{
    word: string,
    weight: number
  }>
}>()

// 图表实例
let chart: echarts.ECharts | null = null
const chartContainer = ref<HTMLElement | null>(null)

// 初始化图表
const initChart = () => {
  if (!chartContainer.value) return
  
  // 创建图表实例
  chart = echarts.init(chartContainer.value)
  
  // 更新图表数据
  updateChart()
  
  // 监听窗口大小变化，调整图表大小
  window.addEventListener('resize', handleResize)
}

// 处理窗口大小变化
const handleResize = () => {
  if (chart) {
    chart.resize()
  }
}

// 更新图表数据
const updateChart = () => {
  if (!chart) return
  
  // 检查数据是否为空
  if (!props.data || props.data.length === 0) {
    chart.setOption({
      title: {
        text: '暂无数据',
        left: 'center',
        top: 'center',
        textStyle: {
          color: '#999',
          fontSize: 16,
          fontWeight: 'normal'
        }
      },
      series: []
    })
    return
  }
  
  // 清除可能存在的"暂无数据"标题
  chart.setOption({
    title: {
      text: ''
    }
  })
  
  // 准备数据
  const data = props.data.map(item => ({
    name: item.word,
    value: item.weight,
    textStyle: {
      color: getRandomColor(item.weight)
    }
  }))
  
  const option = {
    tooltip: {
      show: true,
      formatter: function(params: any) {
        return `<div style="font-weight:bold;">${params.name}</div>热度: ${params.value}`
      }
    },
    series: [{
      type: 'wordCloud',
      shape: 'circle',
      left: 'center',
      top: 'center',
      width: '90%',
      height: '90%',
      right: null,
      bottom: null,
      sizeRange: [12, 50],
      rotationRange: [-45, 45],
      rotationStep: 15,
      gridSize: 8,
      drawOutOfBound: false,
      layoutAnimation: true,
      textStyle: {
        fontFamily: 'sans-serif',
        fontWeight: 'bold'
      },
      emphasis: {
        textStyle: {
          shadowBlur: 10,
          shadowColor: 'rgba(0, 0, 0, 0.3)'
        }
      },
      data: data
    }]
  }
  
  chart.setOption(option)
}

// 根据权重生成随机颜色
const getRandomColor = (weight: number) => {
  // 权重越高，颜色越深
  const maxWeight = Math.max(...props.data.map(item => item.weight))
  const minWeight = Math.min(...props.data.map(item => item.weight))
  
  // 将权重映射到0-1之间
  const normalizedWeight = (weight - minWeight) / (maxWeight - minWeight || 1)
  
  // 颜色列表，从高权重到低权重
  const colors = [
    '#e74c3c', // 红色
    '#e67e22', // 橙色
    '#f39c12', // 黄色
    '#16a085', // 青色
    '#2980b9', // 蓝色
    '#8e44ad'  // 紫色
  ]
  
  // 根据权重选择颜色
  const colorIndex = Math.min(
    Math.floor(normalizedWeight * colors.length),
    colors.length - 1
  )
  
  return colors[colorIndex]
}

// 监听数据变化，更新图表
watch(() => props.data, () => {
  updateChart()
}, { deep: true })

// 组件挂载时初始化图表
onMounted(() => {
  initChart()
})

// 组件卸载时销毁图表
onBeforeUnmount(() => {
  if (chart) {
    chart.dispose()
    chart = null
  }
  window.removeEventListener('resize', handleResize)
})
</script>

<template>
  <div class="keyword-cloud-wrapper">
    <h3 class="chart-title">热门关键词</h3>
    <div ref="chartContainer" class="chart-container"></div>
  </div>
</template>

<style scoped>
.keyword-cloud-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  padding: 16px;
}

.chart-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0 0 12px 0;
}

.chart-container {
  width: 100%;
  height: 280px;
}
</style> 